import { List, WhiteSpace, Tag, ListView, Result } from 'antd-mobile';
import { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'dva';
import { emptyBase64Url } from '@/assets/base64Url'
import moment from 'moment';
import { RECORD_TYPE, RECORD_TIME_TYPE} from '@/config/dict'
const { Item } = List
const { Brief } = Item
@connect(({ manager, loading }) => {
  return {
    manager,
  }
})
class WorkerRecord extends Component {
  constructor(props) {
    super(props)
    this.onEndReached = this.onEndReached.bind(this)
    this.getWorkerRecordList = this.getWorkerRecordList.bind(this)
    this.renderRow = this.renderRow.bind(this)
    this.renderFooter = this.renderFooter.bind(this)
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });
    this.state = {
      dataSource,
      dataItems: [],
      isLoading: false,
      pageIndex: null,
      isMore: true,
      params: {
        pageIndex: 1,
        pageLimit: 10
      }
    }
  }
  renderRow(rowData, sectionID, rowID) {
    return <Item
    >
      <div style={{display: 'flex', justifyContent: 'space-between'}}>
        <span>{moment(rowData.date).format('YYYY-MM-DD')}</span>
        <span>{rowData.workTime}天</span>
      </div>
      <div style={{display: 'flex', justifyContent: 'space-between'}}>
        <span>记录类型：{RECORD_TYPE[rowData.type]} </span>
        <span>工时类型：{RECORD_TIME_TYPE[rowData.timeType]}</span>
      </div>
      <Brief>
        备注：{rowData.remark}
      </Brief>
    </Item>
  }
  // 获取项目结算列表
  getWorkerRecordList(params = {}) {
    const { dispatch, location: {query} } = this.props
    this.setState({
      isLoading: true
    }, () => {
      dispatch({
        type: 'manager/getWorkerRecordList',
        payload: Object.assign({
          userId: query.id
        }, this.state.params, params)
      }).then(res => {
        let dataSource = [];
        let dataItems = [...this.state.dataItems];
        if(res.data.pageIndex === 1 ) {
          dataItems = res.data.items || []
          dataSource = this.state.dataSource.cloneWithRows(dataItems)
        } else {
          dataItems = [...dataItems, ...res.data.items]
          dataSource = this.state.dataSource.cloneWithRows(dataItems)
        }
        this.setState({
          dataItems,
          dataSource,
          isMore: res.data.pageNum !== res.data.pageIndex,
          isLoading: false
        })
      }).catch(() => {
        this.setState({
          isLoading: true
        })
      }) 
    })
  }
  componentDidMount() {
    const hei = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).parentNode.offsetTop;
    this.setState({
      height: hei,
    })
    this.getWorkerRecordList()
  }
  onEndReached(e) {
    if(this.state.isMore && !this.state.isLoading) {
      this.getWorkerRecordList({pageIndex: ++this.state.params.pageIndex})
    }
  }
  renderFooter() {
    if(this.state.isLoading) {
      return '加载中'
    }else {
      if( this.state.dataItems && !this.state.dataItems.length ) {
        return <Result
          message="暂无数据"
          imgUrl={emptyBase64Url}
        />
      }
      if(!this.state.isMore) {
        return '没有更多了'
      }
    }
  }
  render() {
    return (
      <div>
        <WhiteSpace />
        <List>
          <ListView
            ref={el => this.lv = el}
            contentContainerStyle={{width: '100%'}}
            onEndReached={this.onEndReached}
            dataSource={this.state.dataSource}
            renderRow={this.renderRow}
            style={{height: this.state.height}}
            renderFooter={this.renderFooter}
          />
        </List>
      </div>
    )
  }
}
export default WorkerRecord